import { Carousel } from "antd";
import React, { memo } from "react";
import { useRequest } from "ahooks";
import { carouselV1ControllerAll } from "@/services/auto/lunbotu";
import { CarouselPositionCode } from "common/utils/data";
import Item, { ImageProps } from "@/components/AdBanner/Item";

function AdBanner({
  positionCode,
  wrapClassName,
  ...restImageProps
}:Props){
  const {data: carouselData} = useRequest(()=>carouselV1ControllerAll({
    positionCode,
  }))

  if(!carouselData?.length){
    return <></>;
  }

  return <div className={wrapClassName}>
    <Carousel effect="fade" autoplay autoplaySpeed={5000} dots={carouselData.length > 1}>
      {carouselData?.map(item=>{
        return <Item {...restImageProps} data={item} key={item.uuid} />
      })}
    </Carousel>
  </div>
}

export default memo(AdBanner);

export interface Props extends ImageProps{
  positionCode: CarouselPositionCode,
  wrapClassName?: string;
}
